<template>
  <NavBar
    :leftArrow="true"
    :title="title"
    @onClickLeft="goBack" />
  <!-- 发帖人信息 -->
  <div
    v-if="pageType == 'community'"
    class="user-info">
    <div class="avatar">
      <image
        :src="postUser ? postUser.imgUrl : defaultAvatar"
        mode="scaleToFill" />
    </div>
    <div class="name">{{ postUser.username }}</div>
    <div class="type">
      <image
        v-if="postUser.userType != 2"
        src="@/static/icon/专家.svg"
        mode="scaleToFill" />
    </div>
    <div class="date">{{ post.createDate }}</div>
  </div>
  <!-- 科普详情 -->
  <div
    class="knowledge_detail"
    v-if="pageType == 'knowledge'">
    <div class="pic">
      <image
        :src="knowledge.imgUrl"
        mode="aspectFill" />
    </div>

    <div class="info">
      <div class="name">{{ knowledge.name }}</div>
      <div class="info_item">
        <text>学名</text>
        {{ knowledge.scientificName }}
      </div>
      <div class="info_item">
        <text>概述</text>
        {{ knowledge.overview }}
      </div>
      <div class="info_item">
        <text>用途</text>
        {{ knowledge.usage }}
      </div>
      <div class="info_item">
        <text>状态</text>
        {{ knowledge.state }}
      </div>
      <div class="info_item">
        <text>属性</text>
        {{ knowledge.attributes }}
      </div>
      <div class="info_item">
        <text>备注</text>
        {{ knowledge.note }}
      </div>
    </div>
  </div>

  <!-- 社区帖子详情 -->
  <div
    class="detail"
    v-else>
    <div class="pic">
      <image
        :src="post.imgUrl"
        mode="aspectFill" />
    </div>

    <div class="info">
      <div class="title">{{ post.title }}</div>
      <div class="content">
        {{ post.content }}
      </div>
    </div>

    <div class="line" />
    <comment-bar
      v-if="pageType == 'community'"
      @sendMsg="sendMsg" />
    <!-- 评论列表 -->
    <div
      class="comment_empty"
      v-if="comments.length == 0">
      还没有评论哦~
    </div>
    <div
      class="comment"
      v-else>
      <div
        class="comment-item"
        v-for="item in comments"
        :key="item.id">
        <div class="info">
          <div class="avatar">
            <image
              :src="item ? item.imgUrl : defaultAvatar"
              mode="scaleToFill" />
          </div>
          <div class="other">
            <div class="name">
              <text>{{ item.username }}</text>
              <image
                v-if="item.userType != 2"
                src="../../static/icon/专家.svg"
                mode="scaleToFill" />
            </div>
            <div class="date">2024-04-27 19:01:32</div>
          </div>
          <div class="like">
            <image
              v-if="!item.isLiked"
              @click="
                _likeComment(item.id),
                  (item.isLiked = !item.isLiked),
                  item.likes++
              "
              src="../../static/icon/点赞.svg"
              mode="scaleToFill" />
            <image
              v-else
              src="../../static/icon/已点赞.svg"
              mode="scaleToFill" />
            <text>{{ item.likes }}</text>
          </div>
        </div>
        <div class="content">
          {{ item.content }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "../../components/NavBar/NavBar.vue";
import { getPostById } from "../../api/post";
import { getComments, likeComment, addComment } from "../../api/comment";
import { getUserById } from "../../api/user";
import { globalParams } from "../../../public/config.js";
import { formatISODate } from "../../utils/formatISODate";
import { getKnowledgePlantById } from "../../api/plant.js";
import commentBar from "../../components/commentBar/commentBar.vue";
import { mapState } from "vuex";

export default {
  computed: {
    ...mapState(["userInfo"]),
  },
  components: {
    NavBar,
    commentBar,
  },
  data() {
    return {
      title: "详情",
      pageType: "",
      defaultAvatar: "../../static/icon/头像.svg",
      post: {},
      postUser: {},
      comments: [],
      knowledge: {},
    };
  },
  onLoad(options) {
    this.pageType = options.type;
    if (options.type == "community") {
      this._getPostDetail(options.id);
      this._getCommentList(options.id);
    } else if (options.type == "knowledge") {
      this._getKnowledgePlantById(options.id);
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack({ delta: 1 });
    },
    // 获取帖子详情
    async _getPostDetail(id) {
      let { data: res } = await getPostById({ id: id });
      if (res.code === 200) {
        this.post = res.data;
        this.post.imgUrl = globalParams.baseUrl + this.post.imgUrl;
        this.post.createDate = formatISODate(this.post.createDate);
        console.log("获取帖子详情", this.post);
        // 根据查询到的发帖人id获取用户信息
        await this._getUserInfo({ id: this.post.userId });
      }
    },
    // 获取评论列表
    async _getCommentList(id) {
      let { data: res } = await getComments({ postId: id });
      if (res.code === 200) {
        this.comments = res.data;
        this.comments = this.comments.map((item) => {
          item.imgUrl = globalParams.baseUrl + item.imgUrl;
          item.createDate = formatISODate(item.createDate);
          item.isLiked = false;
          return item;
        });
        console.log("获取评论列表", this.comments);
      }
    },
    // 获取用户信息
    async _getUserInfo(id) {
      let { data: res } = await getUserById(id);
      if (res.code === 200) {
        this.postUser = res.data;
        this.postUser.imgUrl = globalParams.baseUrl + this.postUser.imgUrl;
        console.log("获取发帖用户信息", this.postUser);
      }
    },
    // 点赞评论
    async _likeComment(id) {
      let { data: res } = await likeComment(id);
      console.log("点赞评论", res);
    },

    // 获取科普植物详情
    async _getKnowledgePlantById(id) {
      const { data: res } = await getKnowledgePlantById({ id: id });
      console.log("获取科普植物详情", res);
      if (res.code === 200) {
        this.knowledge = res.data;
        this.knowledge.imgUrl = globalParams.baseUrl + this.knowledge.imgUrl;
      }
    },

    // 发送评论
    async sendMsg(msg) {
      let params = {
        postId: this.post.id,
        content: msg,
        userId: this.userInfo.id,
      };
      const { data: res } = await addComment({ ...params });
      console.log("发送评论", res);

      if (res.code === 200) {
        this._getCommentList(this.post.id);

        uni.showToast({
          title: "发送成功",
          icon: "none",
          mask: false,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.user-info {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  padding: 16px 16px 0 16px;
  gap: 12px;
  .avatar {
    width: 48px;
    height: 48px;
    border-radius: 24px;
    image {
      width: 100%;
      height: 100%;
      border-radius: 24px;
    }
  }
  .name {
    font-size: 16px;
    font-weight: bold;
  }
  .type {
    width: 20px;
    height: 20px;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .date {
    font-size: 12px;
    margin-left: auto;
    color: #909399;
  }
}
.detail {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
}
.pic {
  height: 192px;
  margin: 16px 16px 0 16px;
  border-radius: 12px;
  box-shadow: 0px 4px 16px 0px #edeef0;

  image {
    width: 100%;
    height: 100%;
    border-radius: 12px;
  }
}
.info {
  margin: 16px;
  border-radius: 12px;
  background-color: #ffffff;

  .title {
    height: 40px;
    font-size: 18px;
    font-weight: bold;
  }
  .content {
    font-size: 16px;
  }
}
.line {
  height: 1px;
  background-color: #606266;
  margin: 0px 16px;
}
.comment_empty {
  text-align: center;
  font-size: 14px;
  color: #909399;
  margin: 16px;
}
.comment {
  display: flex;
  flex-direction: column;
}
.comment-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  .info {
    display: flex;
    align-items: center;
    gap: 12px;
    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 20px;
      image {
        width: 100%;
        height: 100%;
        border-radius: 20px;
      }
    }
    .other {
      .name {
        font-size: 14px;
        font-weight: bold;
        display: flex;
        align-items: center;

        image {
          width: 20px;
          height: 20px;
        }
      }

      .date {
        font-size: 12px;
        color: #909399;
      }
    }
    .like {
      margin-left: auto;
      display: flex;
      align-items: center;
      image {
        width: 20px;
        height: 20px;
      }
      text {
        font-size: 12px;
        color: #909399;
      }
    }
  }
  .content {
    font-size: 14px;
    margin: 0px 16px 8px 16px;
    padding: 0 0 16px 0;
    border-bottom: 1px solid #e5e5e5e5;
  }
}

.knowledge_detail {
  bottom: 16px;
  .info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    box-shadow: 0px 4px 16px 0px #edeef0;

    .name {
      font-weight: bold;
      font-size: 24px;
    }
    .info_item {
      text {
        font-weight: bold;
        font-size: 16px;
      }
      font-size: 14px;
    }
  }
}
</style>
